<template>
    <div class="icons">
        <swiper class="swiper-container">
            <swiper-slide v-for="(page,index) of pages" :key="index">
            <div class="icon"
                 v-for="item in page"
                        :key="item.id"
            >
                <div class="icon-img">
                <img :src="item.imgUrl" alt="">
                </div>
                <div class="icon-desc">{{item.desc}}</div>
            </div>
            </swiper-slide>
         
         </swiper>
    </div>
</template>

<script>
export default {
    name:'HomeIcons',
    props :{
        iconlist : Array
    },
    data() {
        return {
            // iconList:[{
            //     id:'001',
            //     imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
            //     desc:'热门景点'
            // },
            // {
            //     id:'002',
            //     imgUrl:'http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png',
            //     desc:'一日游'
            // },
            // {
            //     id:'003',
            //     imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/f5/c4c9d9830404e602.png',
            //     desc:'室内娱乐'
            // },  {
            //     id:'004',
            //     imgUrl:'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20194/3ef092d0a89ffddb7f781cda30c8ae49.png',
            //     desc:'热门必游'
            // },  {
            //     id:'005',
            //     imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/76/eb88861d78fb9902.png',
            //     desc:'动植物园'
            // },  {
            //     id:'006',
            //     imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/75/eca3ce656c886502.png',
            //     desc:'木兰天池'
            // },  {
            //     id:'007',
            //     imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/bd/9f7b9b2b60c1502.png',
            //     desc:'踏青赏花'
            // },  {
            //     id:'008',
            //     imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/b1/528a9e80403b8c02.png',
            //     desc:'欢乐谷'
            // },  {
            //     id:'009',
            //     imgUrl:'http://img1.qunarzz.com/piao/fusion/1803/17/99402a22ce4af302.png',
            //     desc:'东湖绿道'
            // }]
        }
    },
    computed:{
        pages (){
            const pages = []
            this.iconlist.forEach((item,index)=>{
                const page = Math.floor(index/8)
                if (!pages[page]) {
                    pages[page] = []
                }
                pages[page].push(item)
            })
            return pages 
        }
    }
}
</script>

<style lang="stylus" scoped>
// 解决可以触发拖动区域只局限于图标高度的问题
.icons >>> .swiper-container 
.icons{
    overflow hidden
    height 0
    padding-bottom 52%
    background-color white
    
.icon{
        float left 
        width 25%
        height: 50%
        padding-bottom 25%
        
        overflow hidden
        position relative
.icon-img{
            
            height 100%
            position absolute
            top 0
            left 0
            right 0
            bottom .44rem
            img{
                width:60%
                display block
                margin 0 auto
                padding-top 14px
            }
        }
.icon-desc{
            position absolute
            left 0 
            right 0
            bottom 0
            font-size 14px
            line-height 1rem
            height .44rem
            color #333
            text-align center
            padding-bottom 20px
            overflow hidden
            white-space nowrap
            text-overflow 
            overflow: hidden
            white-space: nowrap
            text-overflow: ellipsis

        }
    }
}
</style>
